<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		body{
			/*perspective-origin: center;*/
			perspective: 800px;
			perspective-origin: 50% -150%;
		}
		#box{
			width: 300px;
			height: 300px;
			background: red;
			animation: hd 5s linear infinite ;
			padding: 10px;
			transform-style: preserve-3d;
		}
		
		#box #yellow{
			width: 180px;
			height: 180px;
			background: yellow;
			margin: 0 auto;
			transform: rotateX(70deg);
			
		}
		
		@-webkit-keyframes hd{
			from{transform: rotateY(0deg);}
			to{transform: rotateY(360deg);}
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="yellow">
			
		</div>
	</div>
</body>
</html>